<template>
    <div>
        <van-nav-bar
                title="景点随心看"
                left-text="返回"
                left-arrow
                @click-left="tzback()"
        />
        <!--  1.头部 可以排序-->
        <div>
            <van-dropdown-menu>
                <van-dropdown-item v-model="gwhere.order" :options="orderops" />
                <van-dropdown-item  ref="item">
                    <van-cell center title="包邮">
                        <template #right-icon>
                            <van-switch v-model="gwhere.baoyou" size="24" active-color="#ee0a24" />
                        </template>
                    </van-cell>
                    <van-cell center title="促销">
                        <template #right-icon>
                            <van-switch v-model="gwhere.cuxiao" size="24" active-color="#ee0a24" />
                        </template>
                    </van-cell>
                    <van-cell center title="降价">
                        <template #right-icon>
                            <van-switch v-model="gwhere.jiangjia" size="24" active-color="#ee0a24" />
                        </template>
                    </van-cell>
                    <div style="padding: 5px 16px;">
                        <van-button type="danger" block round @click="onConfirm">
                            确认
                        </van-button>
                    </div>
                </van-dropdown-item>
            </van-dropdown-menu>

        </div>
        <!--  2.List 上拉分页-->
        <div>
            <van-list
                    v-model:loading="loading"
                    :finished="finished"
                    finished-text="没有更多了"

            >
                <van-card v-for="v in views"
                          :num="v.repertory"
                          :tag="v.tags"

                          :desc="v.detail"
                          :title="v.vname"
                          :thumb="v.imgurl"

                          @click="tzdetail(v.id)"
                />
            </van-list>
        </div>
    </div>
</template>

<script>
    import { ref } from 'vue';
    export default {
        name: "View",
        setup() {
            const item = ref(null);
            const onConfirm = () => {
                item.value.toggle();
            };
            return {
                item,onConfirm
            }
        },
        data(){
            return{
                loading:false,
                finished:false,
                views:[

                ],
                gwhere:{
                    baoyou:false,
                    cuxiao:false,
                    jiangjia:false,
                    order:"0"
                },
                orderops:[
                    { text: '综合排序', value: 0 },
                    { text: '热度排序', value: 1 },
                    { text: '时间排序', value: 2 },
                ]
            }
        }, mounted() {
            //页面加载，就会执行
            //axios请求后端接口 查询详情
            //获取商品id和type(1商品 2秒杀商品),获取用户id（VueX）
            // var id=this.$route.query.gid;
            // this.type=this.$route.query.type;
            // var url="/api/goods/detail.do";
            // if(this.type==2){
            //     //秒杀商品
            //     url="/api/skill/detail.do";
            // }
            this.axios.get("/api/view/query").then(res=>{
                if(res.data.code==200){
                    //成功
                    this.views=res.data.data;
                }else{
                    //失败
                    Toast('亲，网络异常！');
                }

            })
        },
        methods:{
            tzback(){
                history.back();
            },
            // loadData(){
            //     for (let i = 0; i < 8; i++) {
            //         this.views.push({
            //             id: 1,
            //             vname: "洛阳龙门石窟"+i,
            //             imgurl: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fphoto.tuchong.com%2F17290715%2Ff%2F1273697801.jpg&refer=http%3A%2F%2Fphoto.tuchong.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1653097484&t=cc9b00d3eed9d1fe887f34c74e787d71",
            //             // ctime: "2022-04-19 08:00:00",
            //             tags: "景点图",
            //             detail: "一跃龙门成锦鲤，烧香拜佛路大开",
            //
            //         })
            //     }
            //     this.loading=true;
            // },
            tzdetail(id){
                //跳转页面 传递参数 编程式路由 携带参数
                this.$router.push({path:"/viewDetail",query:{vid:id}});
            }
        }
    }
</script>

<style scoped>

</style>